<template lang="pug">
  ModuleWrapper(title="当日上报事件概况" flex="1")
    HorizontalBisection
      StaticCompareView.static-item(:itemData="{label: '上报事件', value: F0000005}")
      StaticCompareView.static-item(:itemData="{label: '未处理事件', value: F0000006}")
      StaticCompareView.static-item(:itemData="{label: '已处理事件', value: F0000007}")
    SectionWrapper(title="事件分类占比" flex="unset")
      div.rate-wrap
        div.rate-item(v-for="(item, index) in sjsbData" :key="index"
          ref="RateItem")
          div.chart-wrap
          div.label {{ item.label }}
    SectionWrapper(title="当日上报事件概况")
      ProgressWrapper
        ProgressView(v-for="(item, index) in watchPointData"
          :key="index" :label="item.label" :rate="item.rate" :color="watchPointColor(item)")
</template>

<script>
export default {
  name: "ModuleReportIncidentToday",
  props: {
   	F0000005:{
   	  type:String,
   	  required:false
   	},
  	F0000007:{
  	  type:String,
  	  required:false
  	},
  	F0000006:{
  	  type:String,
  	  required:false
  	},
	sjsbData:{
		type:Array,
		required:false
	},
   },
  data() {
    return {
      watchPointData: [
        {
          label: '值守点A',
          rate: 0,
        },
        {
          label: '值守点A',
          rate: 0,
        },
        {
          label: '值守点A',
          rate: 0,
        },
        {
          label: '值守点A',
          rate: 0,
        },
        {
          label: '值守点A',
          rate: 0,
        },
      ],
      charts: {
        numberDuty: null,
        rateList: [],
      }
    }
  },
  computed: {
    watchPointColor() {
      return item => {
        let color = '';
        if (item.rate > 100) {
          color = '#F07B5F';
        } else if(item.rate > 30) {
          color = '#05FDBB';
        } else {
          color = '#FFFFFF';
        }
        return color;
      }
    }
  },
  watch: {
    sjsbData: {
      handler() {
        this.renderRateCharts();
      },
      deep: true,
    }
  },
  methods: {
    renderRateCharts() {
      this.charts.rateList = [];
      this.sjsbData.forEach((item, index) => {
        this.charts.rateList[index] = this.$echarts.init(this.$refs['RateItem'][index].getElementsByClassName('chart-wrap')[0]);
        this.charts.rateList[index].setOption({
          title: {
            text: `${item.rate}%`,
            left: 'center',
            top: 'center',
            textStyle: {
              color: '#FFF',
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false,
          },
          series: [
            {
              name: '占比',
              type: 'pie',
              radius: ['75%', '100%'],
              avoidLabelOverlap: false,
              z: 1,
              itemStyle: {
                borderRadius: 10,
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {
                  value: item.rate, name: '搜索引擎',
                  itemStyle: {
                    normal: {
                      color: '#05FDBB',
                    }
                  }
                },
                {
                  value: (100 - item.rate), name: '直接访问',
                  itemStyle: {
                    normal: {
                      color: 'transparent',
                    }
                  }
                },
              ]
            },
            {
              name: '占比',
              type: 'pie',
              radius: ['75%', '100%'],
              avoidLabelOverlap: false,
              itemStyle: {
                normal: {
                  color: 'rgba(255, 255, 255, 0.1)',
                }
              },
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: false
              },
              data: [
                {value: 100, name: '搜索引擎'},
              ]
            },
          ]
        });
      });
    },
  },
  mounted() {
    this.renderRateCharts();
  }
}
</script>

<style lang="scss" scoped>
.rate-wrap{
  display: flex;
  justify-content: space-between;
  .rate-item{
    .chart-wrap{
      @include square(rem(75));
      margin-bottom: rem(15);
    }
    .label{
      text-align: center;
      color: #698B95;
      font-size: rem(18);
    }
  }
}
</style>
